<template>
  <div id="header">
    <div class="container">
      <div class="header-top">
        <div class="header-left">
          <img src="../assets/images/a.png" alt="" />
        </div>
        <div class="header-right">
          <div class="right-top">
            <img src="../assets/images/b.png" alt="" />
          </div>
          <div class="right-middle">
            <p class="p1">专为年轻人打造的动静态壁纸及桌面美化的电脑应用软件</p>
            <p class="p2">海量高清动静态壁纸下载使用，最新版极速下载</p>
          </div>
          <div class="right-bottom">
            <div class="bottom-tubiao iconfont icon-windows"></div>
            <a
              href="https://softdl.www.duba.net/softmgr/package/infoflow/package/kdesk_33_1.exe"
              class="bottom-wenzi"
              >点击下载</a
            >
          </div>
        </div>
      </div>
      <div class="content">
        <comp-zhuomian></comp-zhuomian>
      </div>
      <comp-bizhi></comp-bizhi>
      <div class="zhizuo">
        <comp-zhizuo></comp-zhizuo>
      </div>
    </div>
  </div>
</template>

<script>
import compZhuomian from "@/components/comp-zhuomian.vue";
import compBizhi from "@/components/comp-bizhi.vue";
import compZhizuo from "@/components/comp-zhizuo.vue";
export default {
  name: "gongneng",
  components: {
    compZhuomian,
    compBizhi,
    compZhizuo,
  },
  data() {
    return {
      isShow: -1,
    };
  },
  methods: {
    myEnter(i) {
      this.isShow = i;
    },
    myLeave() {
      this.isShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
#header {
  .container {
    width: 1200px;
    margin: 0 auto;
    .header-top {
      width: 1200px;
      margin: 0 auto;
      background-color: #f2dc45;
      display: flex;
      justify-content: space-between;
      .header-left {
        img {
          width: 700px;
          height: 300px;
        }
      }
      .header-right {
        position: relative;
        .right-top {
          position: absolute;
          right: 30px;
          margin-top: 20px;
          img {
            width: 250px;
            height: 58px;
          }
        }
        .right-middle {
          margin-top: 98px;
          position: relative;
          width: 431px;
          height: 10px;
          .p1 {
            position: absolute;
            right: 30px;
            top: -31px;
          }
          .p2 {
            position: absolute;
            right: 30px;
          }
        }
        .right-bottom {
          width: 200px;
          height: 50px;
          line-height: 50px;
          position: absolute;
          right: 30px;
          top: 200px;
          display: flex;
          border: 1px solid #000000;
          background-color: #000000;
          color: #ffffff;
          border-radius: 5px;
          .bottom-tubiao {
            font-size: 18px;
            margin-left: 55px;
            margin-right: 10px;
          }
          .bottom-wenzi {
            font-size: 18px;
            text-decoration: none;
            color: white;
          }
        }
      }
    }
  }
}
</style>